<template>
	<view class="content">
    <view class="join-top">
      为了保证社群成员质量，申请需要实名认证，资料均经过技术手段保障数据安全，请放心填写。
    </view>
    <u-read-more ref="uReadMore" :toggle="true" text-indent="0" color="#333">
      <view class="join-content">
        <view class="join-title">认证申请表</view>
        <view class="join-time">2023-08-11 18:31</view>
        <rich-text :nodes="content"></rich-text>
      </view>
    </u-read-more>
    <view class="u-m-t-16">
      <u-cell-group>
        <view class="titlestyle">基本信息</view>
        <u-line color="#e4e7ed" />
        <u-cell-item title="真实姓名" title-width="210" hover-class="none" :arrow="false">
          <u-input v-model="value" placeholder="输入认证人自己的真实姓名" />
        </u-cell-item>
        <u-cell-item title="手机号码" title-width="210" hover-class="none">
          <u-input v-model="value" placeholder="输入手机号码" />
        </u-cell-item>
        <u-cell-item title="性别" title-width="210" hover-class="none" :arrow="false">
          <u-input v-model="form.value1" type="select" placeholder="选择性别" @click="show1 = true" />
          <u-picker v-model="show1" mode="selector" :range="list1" range-key="label" @confirm="confirm"></u-picker>
        </u-cell-item>
        <u-cell-item title="生日" title-width="210" hover-class="none" :arrow="false">
          <u-input v-model="form.value2" type="select" placeholder="选择出生日期" @click="show2 = true" />
          <u-picker v-model="show2" mode="time" @confirm="confirm2"></u-picker>
        </u-cell-item>
        <u-cell-item title="常住地区" title-width="210" hover-class="none" :arrow="false">
          <u-input v-model="form.value3" type="select" placeholder="选择常住地区" @click="show3 = true"/>
          <u-picker v-model="show3" mode="region" @confirm="confirm3"></u-picker>
        </u-cell-item>
      </u-cell-group>
    </view>
    <view class="u-m-t-16">
      <u-cell-group>
        <view class="titlestyle">职业信息</view>
        <u-line color="#e4e7ed" />
        <u-cell-item title="从事行业" title-width="210" hover-class="none" :arrow="false">
          <u-input v-model="form.value4" type="select" placeholder="选择行业" @click="show4 = true" />
          <u-picker v-model="show4" mode="selector" :range="list2" range-key="label" @confirm="confirm4"></u-picker>
        </u-cell-item>
        <u-cell-item title="工作单位名称" title-width="210" hover-class="none" :arrow="false">
          <u-input v-model="value" placeholder="输入工作单位名称" />
        </u-cell-item>
        <u-cell-item title="主要职务" title-width="210" hover-class="none" :arrow="false">
          <u-input v-model="form.value5" type="select" placeholder="选择职务" @click="show5 = true" />
          <u-picker v-model="show5" mode="selector" :range="list3" range-key="label" @confirm="confirm5"></u-picker>
        </u-cell-item>
      </u-cell-group>
    </view>
    <view class="u-m-t-16">
      <view class="remark">
        <view class="titlestyle">附加信息</view>
        <view class="u-p-32">
          <u-input v-model="value" type="textarea" placeholder="其他未尽事宜,请在这填写" height="300" class="remark-input" />
        </view>
      </view>
    </view>
    <view class="u-m-t-16">
      <view style="background-color: #fff;line-height: 1.5rem;">
        <view class="titlestyle">特别说明</view>
        <view class="u-p-l-32 u-p-r-32 u-p-b-32">
          <view>1.社群为交流社群，为了社群内用户体验考虑，我们将适度对行业商家、改装店、部分过度营销行业用户等进行限制加入敬请谅解!</view>
          <view>2.你提交认证后，会有工作人员联系你沟通</view>
          <view>3.如果你是专业的，具备品牌力的经营机构，可以联系治谈服务。</view>
        </view>
      </view>
    </view>
    <view class="u-m-t-16">
      <view class="u-flex privacy" style="">
        <view>
          <u-checkbox
           v-model="privacyValue" 
           active-color="#fed500" 
           shape="circle"
           size="35"
           style="display: block;margin-right: 10rpx;">
           </u-checkbox>
        </view>
        <view>
          <view>我已阅读并同意</view>
          <view>
            <text class="privacy-c">《用户协议》</text>&<text class="privacy-c">《隐私政策》</text>
          </view>
        </view>
      </view>
    </view>
    <view class="s-btn s-btn--primary s-size-default s-btn-none" style="margin-top: 100rpx;">提交认证</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
        苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
        无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
        苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
        无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
        form:{
          value1:'',
          value2:'',
          value3:'',
          value4:'',
          value5:'',
        },
        value:'',
        privacyValue:false,
        show1:false,
        show2:false,
        show3:false,
        show4:false,
        show5:false,
        list1: [
          {value: '1',label: '男'},
          {value: '2',label: '女'}
        ],
        list2: [
          {value: '1',label: '互联网1'},
          {value: '2',label: '互联网2'}
        ],
        list3: [
          {value: '1',label: '攻城狮'},
          {value: '2',label: '射击师'}
        ],
			}
		},
		onLoad() {

		},
		methods: {
      confirm1(e){
        this.form.value1 = this.list1[e[0]].label
      },
      confirm2(e){
        console.log(e);
        this.form.value2 = e.year+e.month+e.day
      },
      confirm3(e){
        console.log(e);
        this.form.value3 = e.area.label+e.city.label+e.province.label
      },
      confirm4(e){
        this.form.value4 = this.list2[e[0]].label
      },
      confirm5(e){
        this.form.value5 = this.list3[e[0]].label
      }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
    .join-top{
      width: 100%;
      background-color: $supernut-color;
      padding: 12rpx 36rpx;
      line-height: 1.3rem;
    }
    .join-content{
      padding:32rpx;
      .join-title{
        font-size: 36rpx;
        color: #333;
      }
      .join-time{
        color: #333;
      }
    }
    .titlestyle{
      padding: 32rpx;
    }
    .remark{
      background-color: #fff;
      .remark-input{
        background-color: #f3f3f3;
        padding: 8rpx 12rpx !important;
      }
    }
    .privacy{
      padding: 32rpx;
      background-color: #fff;
      .privacy-c{
        color: $supernut-color;
      }
    }
    .uni-input{
      text-align: left;
      color: #333;
    }
	}
</style>
